<template>
  <div id="login-box" style="background-image:url('static/default/login.png')" v-on:keyup.13="handleSubmit('formInline')">
    <div id="login-form">
      <div id="logos" class="item">
        <img src="static/images/logo.png" alt srcset>
      </div>
      <Form ref="formInline" :model="formInline" :rules="ruleInline" inline>
        <div class="item">
          <FormItem prop="user">
            <Input type="text" class="inputs" v-model="formInline.user" placeholder="用户名">
              <Icon type="ios-person-outline" slot="prepend"></Icon>
            </Input>
          </FormItem>
        </div>
        <div class="item">
          <FormItem prop="password">
            <Input type="password" class="inputs" v-model="formInline.password" placeholder="密码">
              <Icon type="ios-lock-outline" slot="prepend"></Icon>
            </Input>
          </FormItem>
        </div>
        <div class="item">
          <FormItem>
            <Button type="primary" id="login" @click="handleSubmit('formInline')">登录</Button>
          </FormItem>
        </div>
      </Form>
    </div>
  </div>
</template>
<script>
import { login } from "@/config/api";
import { mapMutations } from "vuex";
export default {
  name: "Login-view",
  data() {
    return {
      formInline: {
        user: "",
        password: ""
      },
      ruleInline: {
        user: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur"
          }
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur"
          },
          {
            type: "string",
            min: 6,
            message: "密码最小长度为六位",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    ...mapMutations(["saveInfo"]),
    handleSubmit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          login(this.formInline.user, this.Md5(this.formInline.password))
            .then(result => {
              if (result.data.status == "1") {
                const token = result.data.data[0];
                sessionStorage.setItem("token", JSON.stringify(token)); //存储用户数据
                if (token.type == "1") {
                  this.$Message.warning("普通用户无法访问后台，请联系管理员!");
                } else {
                  this.saveInfo(token);
                  this.$Message.success("登录成功!");
                  setTimeout(() => {
                    this.$router.push("/admin");
                  }, 1000);
                }
              } else {
                this.$Message.error("登录失败!");
              }
            })
            .catch(err => {
              console.log(err);
            });
        }
      });
    }
  }
};
</script>
<style scoped>
#login-box {
  height: 100%;
  background-position: center;
  background-size: cover;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
#logos {
  text-align: center;
}
.item {
  text-align: center;
  padding: 10px 20px;
}
#login {
  width: 240px;
}
.inputs {
  width: 240px;
}
</style>


